<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>论坛</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<!-- 
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugin/bootstrap3/css/bootstrap.min.css">
 -->

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<!--  <link rel="stylesheet" href="<%=request.getContextPath()%>/plugin/bootstrap3/css/bootstrap-theme.css">-->
<!--引入bootswatchFreeTheme文件-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugin/bootstrap3/css/bootstrap.min.css">
<!--引入normalize样式-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugin/bootstrap3/css/normalize.css">
<!--引入tab样式-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugin/bootstrap3/css/tabdrop.css">
<!--引入AmazeUI样式-->
<!--
<link rel="stylesheet" href="assets/css/amui.all.min.css">
<link rel="stylesheet" href="assets/css/app.css">
-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="<%=request.getContextPath() %>/plugin/bootstrap3/js/jquery-1.11.1.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="<%=request.getContextPath()%>/plugin/bootstrap3/js/bootstrap.min.js"></script>
<!--引入tab的js文件-->
<script src="<%=request.getContextPath()%>/plugin/bootstrap3/js/bootstrap-tabdrop.js"></script>
<!--引入AmazeUI必须的js文件-->
<!--
<script src="http://libs.baidu.com/zepto/1.1.3/zepto.min.js"></script>
<script>window.Zepto || document.write('<script src="assets/js/zepto.min.js?1.1.3"><\/script>')</script>
<script src="assets/js/amui.js"></script>
<script src="assets/js/app.js"></script>
-->
<style>
body { padding-top: 70px; }
.navbar .nav > li .dropdown-menu {
	margin: 0;
}
.navbar .nav > li:hover .dropdown-menu {
	display: block;
}
</style>

</head>

<body style="background-color: #fff">
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，本网站暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">论坛</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle"  data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
     
      <ul class="nav navbar-nav navbar-right">
        <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!--警告框信息-->
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h5>欢迎光临<a href="#" class="alert-link"><strong>PTC</strong>程序员论坛</a>，这里有最新的技术、最全的讲解、最生动的Demo还有各种大神等着你发现...</h5>


</div>

<!--路径导航-->
<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">最新文章</a></li>
  <li class="active">信息展示</li>
</ol>

<div class="row">
  <div class="col-xs-12 col-md-8">
  	<div class="jumbotron">
<div class="container">
  <h1>最新主题轮播</h1>
  <p>这里放置最新图片</p>
  <p><a class="btn btn-success btn-lg" role="button">轮播</a></p>
  </div>
</div>
<!--轮播图片下面的最热帖子或最人气的帖子-->
<div class="panel panel-default">
	<div class="panel-heading">
    <h3 class="panel-title">最热帖子</h3>
  </div>
  <div class="panel-body">
    <div class="row">
    	<div class="col-lg-12 text-center">
        	<div class="page-header">
  				<h1>Amaze UI 1.0正式发布了！</h1>
			</div>
        </div>
        <div class="col-lg-12 text-center">
        <p>
        <span class="label label-info"><i class="glyphicon glyphicon-tags"></i>&nbsp;<a href="#">HTML5 AmazeUI</a></span>
			<span class="label label-warning"><i class="glyphicon glyphicon-user"></i>&nbsp;<a href="#">刘涛</a></span>
			<span class="label label-success"><i class="glyphicon glyphicon-eye-open"></i>3.102人</span>
        </p>
        	
        </div>
        <div class="col-lg-12 text-center">
        <p>
        <img  src="<%=request.getContextPath()%>/plugin/bootstrap3/images/gg2.jpg" class="img-responsive img-rounded" alt="Responsive image">
        </p>
        </div>
        <div class="col-lg-12 text-center">
        	<div class="well well-lg">
            	Amaze UI 非常注重性能，基于轻量的 Zepto.js 开发，并使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让你的 Web 应用可以高速载入。相比国外的前端框架，Amaze UI 专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及 App 内置浏览器提供更好的兼容性支持，为你节省大量兼容性调试时间。Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅度提升你的开发效率...
            </div>
        </div>
        <div class="col-lg-12 text-right">
        	<ul class="nav nav-pills nav-stacked" role="tablist">
  <li role="presentation" class="active">
    <a href="#">
      <span class="badge pull-right">42</span>
      阅读全文
    </a>
  </li>
</ul>
        </div>
    </div>
  </div>
</div>


  </div>
  <div class="col-xs-6 col-md-4">
  	<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          热门主题
        </a>
        <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
       <div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">
    关于最新HTML5技术...
	<span class="badge">浏览次数14</span>
  </a>
  <a href="#" class="list-group-item">关于最新HTML5技术...<span class="badge">浏览次数8</span></a>
  <a href="#" class="list-group-item">关于最新HTML5技术...<span class="badge">浏览次数6</span></a>
  <a href="#" class="list-group-item">关于最新HTML5技术...<span class="badge">浏览次数10</span></a>
  <a href="#" class="list-group-item">关于最新HTML5技术...<span class="badge">浏览次数140</span></a>
</div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          资源分享
        </a>
        <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
         每周推荐
        </a>
        <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
  	
  </div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="page-header">
  <h2>前沿技术 <small>Java</small></h2>
</div>
<div class="row">
  <div class="col-sm-12 col-md-8">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img data-src="holder.js/300x300" src="<%=request.getContextPath()%>/plugin/bootstrap3/images/cxy2.jpg" alt="..." class="img-rounded">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
	</div>
	<div class="col-sm-6 col-md-4">
		<div class="thumbnail">
      <img data-src="holder.js/300x300"  src="<%=request.getContextPath()%>/plugin/bootstrap3/images/cxy2.jpg" alt="..." class="img-rounded">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
	</div>
	<div class="col-sm-6 col-md-4">
		<div class="thumbnail">
      <img data-src="holder.js/300x300"  src="<%=request.getContextPath()%>/plugin/bootstrap3/images/cxy2.jpg" alt="..." class="img-rounded">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
	</div>
	<ul class="pager">
  <li ><a href="#">&larr; 上翻</a></li>
  <li ><a href="#">下翻 &rarr;</a></li>
</ul>
  </div>
 
   <div class="col-sm-6 col-md-4">
  
    <div class="thumbnail">
	 <div class="page-header" style="margin-top:0px; padding-top:0px;">
  <ul class="nav nav-pills nav-stacked " role="tablist">
  <li role="presentation" class="active">
    <a href="#">
      <span class="badge pull-right">42</span>
      黄金版主人气指数
    </a>
  </li>
</ul>
</div>
      <img data-src="holder.js/100%x180"  src="<%=request.getContextPath()%>/plugin/bootstrap3/images/bz1.jpg" alt="..." class="img-rounded">
      <div class="caption">
        <h3>苍井空</h3>
        <p>苍井空老师钻研Java技术10年有余，曾经接受各种大型常人难以完成的任务征服了广大宅男...</p>
        <p><a href="#" class="btn btn-primary" role="button">深入了解</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="page-header">
  <h2>赞助商 <small>广告轮动</small></h2>
</div>

<div class="row">
 <div class="col-sm-12 col-md-8">
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
	<li data-target="#carousel-example-generic" data-slide-to="3"></li>
	<li data-target="#carousel-example-generic" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="<%=request.getContextPath()%>/plugin/bootstrap3/images/gg1.jpg" alt="..." class="img-rounded">
      <div class="carousel-caption">
        
		<p><button type="submit" class="btn btn-primary btn-lg">了解详情</button></p>
      </div>
    </div>
    <div class="item">
      <img src="<%=request.getContextPath()%>/plugin/bootstrap3/images/gg2.jpg" alt="..." class="img-rounded">
      <div class="carousel-caption">
    
		<p><button type="submit" class="btn btn-primary btn-lg">了解详情</button></p>
      </div>
    </div>
    
	<div class="item ">
      <img src="<%=request.getContextPath()%>/plugin/bootstrap3/images/gg3.jpg" alt="..." class="img-rounded">
      <div class="carousel-caption">

		<p><button type="submit" class="btn btn-primary btn-lg">了解详情</button></p>
      </div>
    </div>
	<div class="item ">
      <img src="<%=request.getContextPath()%>/plugin/bootstrap3/images/gg4.jpg" alt="..." class="img-rounded">
      <div class="carousel-caption">
    
		<p><button type="submit" class="btn btn-primary btn-lg">了解详情</button></p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<ul class="nav nav-tabs">
	<li class="active"><a href="#a1">最新回复</a></li>
    <li><a href="#a2">热门评论</a></li>
    <li><a href="#a3">精品帖子</a></li>
    <li><a href="#a4">每周之星</a></li>
</ul>
<div class="tabbable tabs-below">
<div class="tab-content">
	<div class="tab-pane active" id="a1">
   		<ul class="media-list">
          <li class="media">
            <a class="pull-left" href="#">
              <img class="media-object img-thumbnail" src="<%=request.getContextPath()%>/plugin/bootstrap3/images/64/DarkChampion_EndlessRage.png" alt="...">
            </a>
            <div class="media-body">
              <h5 class="media-heading"><a href="#" class="text-primary">关于easyui中DataGrid异步加载数据出现中文乱码</a></h5>
              <small>针对关于easyui中DataGrid异步加载数据出现中文乱码，中文乱码很好解决只要用过滤器...</small>
              <br>
              <label class="pull-right"><span class="badge">2014-08-29</span></label>
            </div>
          </li>
          
          <li class="media">
            <a class="pull-left" href="#">
              <img class="media-object img-thumbnail" src="<%=request.getContextPath()%>/plugin/bootstrap3/images/64/Draven_passive.png" alt="..." >
            </a>
            <div class="media-body">
              <h5 class="media-heading"><a href="#" class="text-primary">关于easyui中DataGrid异步加载数据出现中文乱码</a></h5>
              <small>针对关于easyui中DataGrid异步加载数据出现中文乱码，中文乱码很好解决只要用过滤器...</small>
            </div>
          </li>
          
          <li class="media">
            <a class="pull-left" href="#">
              <img class="media-object img-thumbnail" src="<%=request.getContextPath()%>/plugin/bootstrap3/images/64/Katarina_Voracity.png" alt="...">
            </a>
            <div class="media-body">
              <h5 class="media-heading"><a href="#" class="text-primary">关于easyui中DataGrid异步加载数据出现中文乱码</a></h5>
              <small>针对关于easyui中DataGrid异步加载数据出现中文乱码，中文乱码很好解决只要用过滤器...</small>
            </div>
          </li>
		</ul>
	</div>
    
    <div class="tab-pane" id="a2">
    	<h1>我是a2</h1>
    </div>
    <div class="tab-pane" id="a3">
    	<h1>我是a3</h1>
    </div>
    <div class="tab-pane" id="a4">
    	<h1>我是a4</h1>
    </div>
</div>
</div>
</div>


</div>
</div>
<!--关于tab的js方法开始-->
<script>
$(function(){
	$('.nav-tabs:last').tabdrop({text:'级别'});
	$('.nav-tabs a:last').tab('show');//初始化显示那个tab
	$('.nav-tabs a').click(function(e){
		e.preventDefault();//阻止a连接的跳转行为
		$(this).tab('show');
		});
	});
</script>
</body>
</html>
